<template>
    <div class="photoinfo-container">
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间：{{ photoinfo.add_time | dateFormat }}</span>
            <span>点击： {{ photoinfo.click }}次</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumbs">
            <vue-preview :slides="list" @close="handleClose"></vue-preview>
        </div>
        <!-- <div class="thumbs">
            <img class="preview-img" v-for="(item, index) in slide1" :src="item.src" height="100" @click="$preview.open(index, slide1)" :key="item.src">
        </div> -->
        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 放置一个现成的 评论子组件 -->
        <cmt-box id="57"></cmt-box>
    </div>
</template>

<script>
import axios from 'axios'
import {Toast} from 'mint-ui'
import comment from '../subcomponents/Comment.vue'

export default {
    data () {
        return {
            id : this.$route.params.id,
            photoinfo : {},
            list : []
            // slide1: [
            //     {
            //         src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            //         msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            //         alt: 'picture1',
            //         title: 'Image Caption 1',
            //         w: 600,
            //         h: 400
            //     },
            //     {
            //         src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            //         msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            //         alt: 'picture2',
            //         title: 'Image Caption 2',
            //         w: 1200,
            //         h: 900
            //     }
            // ]
        }
    },
    created () {
        this.getPhotoInfo()
        this.getThumbs()
        // console.log(this)
    },
    components : {
        "cmt-box" : comment
    },
    methods : {
        async getPhotoInfo () {
            try {
                const { data } = await axios.get(`/api/img/${this.id}`)      
                this.photoinfo = data
                console.log(this)
            } catch (err) {
                const { status, statusText } = err.response
                Toast(status + statusText)
            }
        },
        async getThumbs () {
            try {
                const { data } = await axios.get(`/api/thumbs/${this.id}`)
                data.forEach((item, i) => {
                    item.msrc = item.src
                    item.alt = 'picture' + i
                    item.title = 'picture title ' + i
                    item.w = 600
                    item.h = 400
                })
                this.list = data
            } catch (err) {
                const { status, statusText } = err.response
                Toast(status + statusText)
            }
        },
        handleClose () {
            console.log('close event')
        }
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container {
    padding: 3px;
    h3{
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }
    .content {
        font-size: 13px;
        line-height: 30px;
    }
    .thumbs {
        img {
            margin: 10px;
            box-shadow: 0 0 8px #999;
        }
    }
}
</style>
